import React from 'react';
import Headpic from './headpic.js';
import {userInfoAdd,getuser} from './../../api';
import {remove,set} from './../../store';
import $ from 'jquery';


export default class PersonInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      user: null,
      headpic: null,
    }
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.getImageheader = this.getImageheader.bind(this);
  }

  componentWillMount() {
    let user = this.props.user;
    let prefix ='http://www.maksdu.com/static/image/';
    if(user) {
      this.setState({
        user: user,
        headpic: user.userinfo.headpic==""?null:user.userinfo.headpic
      });
    } else {
      this.setState({
        user: null,
        headpic: null
      });
    }
  }

  getImageheader(resp) {
  	if(resp.status == 200) {
  		let headpic = resp.content;
  		let user = this.state.user;
  		console.info("获取到头像链接："+headpic);
  		user.userinfo['headpic'] = headpic;
  		this.setState({
  			headpic:headpic,
  			user: user
  		})
  		console.info(this);
  	} else {
  		this.setState({
  			headpic:''
  		})
  	}
  }

  handleChange(event) {
    const target = event.target;
    const name = target.name;
    let user = this.state.user;
    user.userinfo[name]=target.value;
    this.setState({
      user: user
    });
    // info.map((key,value)=>{
    //   console.info(key+" "+value);
    // })
  }

  submit() {
    let userinfo = this.state.user.userinfo;
    userInfoAdd(userinfo).then(resp=>{
      if(resp.status===200) {
         //清理缓存信息;
         remove('_user');
         getuser().then(resp=>{
            console.info("用户信息正在被修改");
            set('_user',JSON.stringify(resp.content));
            this.setState({
              user: resp.content,
            });
         })
         
      }
    })
  }

  render() {
    return (
      <div className="person_info_box">
      		<div className="person_title">
      			基本信息
      		</div>
      		<div className="input_control">
            <label className="up_label">头像:</label>
            	<Headpic headUrl={this.state.headpic?this.state.headpic:'http://www.maksdu.com/static/image/default.jpg'}  
            	     targetUrl="" width="144px" default={this.state.headpic?true:false} onChange={this.handleChange} bindChange={this.getImageheader}/>
      		</div>
      		<div className="input_control">
            <div>
              <label className="up_label">真实姓名:</label>
      			  <input type="text" placeholder="真实姓名" name="realName" onChange={this.handleChange} defaultValue={this.state.user.userinfo.realName}/>
      			</div>
            <div className="input_alert"></div>
      			<div className="clear"></div>
      		</div>
      		<div className="input_control">
            <label className="up_label">学号:</label>
      			<input type="text" placeholder="请填写您的学号" name="studentNumber" onChange={this.handleChange} defaultValue={this.state.user.userinfo.studentNumber}/>
      			<div className="input_alert"></div>
      			<div className="clear"></div>
      		</div>
          <div className="input_control">
            <label className="up_label">学校来源:</label>
            <input type="text" placeholder="请填写您的学校" name="schoolFrom" onChange={this.handleChange} defaultValue={this.state.user.userinfo.schoolFrom}/>
            <div className="input_alert"></div>
            <div className="clear"></div>
          </div>
      		<div className="input_control">
            <label className="up_label">学院:</label>
      			<input type="text" placeholder="请填写您的学院" name="schoolName" onChange={this.handleChange} defaultValue={this.state.user.userinfo.schoolName}/>
      			<div className="input_alert"></div>
      			<div className="clear"></div>
      		</div>
      		<div className="input_control">	
            <label className="up_label">专业:</label>
      			<input type="text" placeholder="请填写您的专业信息" name="depth" onChange={this.handleChange} defaultValue={this.state.user.userinfo.depth}/>
      			<div className="input_alert"></div>
      			<div className="clear"></div>
      		</div>
      		<div className="input_control">	
            <label className="up_label">兴趣爱好:</label>
      			<input type="text" placeholder="请填写您的兴趣爱好" name="hobby" onChange={this.handleChange} defaultValue={this.state.user.userinfo.hobby}/>
      			<div className="input_alert"></div>
      			<div className="clear"></div>
      		</div>
      		<div className="input_control">	
      			<label className="up_label">个人描述:</label>
            <textarea placeholder="个人描述，50字以内" name="description" onChange={this.handleChange} defaultValue={this.state.user.userinfo.description}/>
      			<div className="input_alert"></div>
      			<div className="clear"></div>
      		</div>
      		<div className="input_control">
      			<button type="button" className="btn btn-success" name="submit" style={{marginLeft:'38%'}} onClick={this.submit}>保存</button>
      		</div>
      </div>
    );
  }
}